<!DOCTYPE HTML>
<html>
    <head>
         <meta charset="utf-8"/>
        <title>事件监听冒泡阶段</title>
        <meta name="auther" content="wangjiale"/>
        <meta name="description" content="A simper example"/>
        <style type="text/css"> 
            p{
                background:gray;
                color:white;
                padding:10px;
                margin:5px;
                border:thin solid black;
            }
            span{
                background:white;
                color:black;
                padding:2px;
                cursor:default;
            }
        </style>
    </head>
    <body>
        <p id="block1">
            There are lots of different kinds of fruil-there are over 500 
            varieties of <span id="banana">banana</span> alone. By the time we add the countless 
            types of apples,oranges,and other well-known fruit,we are faced with thousands of choices.
        </p>
    </body>
    <script type="text/javascript">
        var banana=document.getElementById("banana");
        var textblock=document.getElementById("block1");
        banana.addEventListener("mouseover",handleMouseEvent);
        banana.addEventListener("mouseout",handleMouseEvent);
        //事件捕捉阶段
        textblock.addEventListener("mouseover",handleDescendantEvent,true);
        textblock.addEventListener("mouseout",handleDescendantEvent,true);
        //事件冒泡阶段
        textblock.addEventListener("mouseover",handlebubbleMouseEvent,false);
        textblock.addEventListener("mouseout",handlebubbleMouseEvent,false);
        function handlebubbleMouseEvent(e){
            if(e.type=="mouseover" && e.eventPhase==Event.BUBBLING_PHASE){
                e.target.style.textTransform="uppercase";
            }else if(e.type=="mouseout" && e.eventPhase==Event.BUBBLING_PHASE){
                e.target.style.textTransform="none";
            }
        }
        function handleDescendantEvent(e){
            if(e.type=="mouseover" && e.eventPhase==Event.CAPTURING_PHASE){
                e.target.style.border="thick solid red";
                e.currentTarget.style.border="thick double black";
            }else if(e.type=="mouseout" && e.eventPhase==Event.CAPTURING_PHASE){
                e.target.style.removeProperty("border");
                e.currentTarget.style.removeProperty("border");
            }
            //e.stopPropagation();//阻止事件前进
        }
        function handleMouseEvent(e){
            if(e.type=="mouseover"){
                e.target.style.background="black";
                e.target.style.color="white";
            }else{
                e.target.style.removeProperty("color");
                e.target.style.removeProperty("background");
            }
        }
    </script>
</html>